<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>患者360视图系统</title>
    <link href="/wwwroot/elementui/theme-chalk/index.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/base.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/ui-base.css" rel="stylesheet"/>
    <link href="/wwwroot/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/watermarkt.css" rel="stylesheet"/>
    <script src="/wwwroot/Vue/vue.min.js"></script>
    <script src="/wwwroot/Vue/vue-router.js"></script>
    <script src="/wwwroot/Vue/axios.min.js"></script>
    <script src="/wwwroot/Scripts/jquery-2.2.3.min.js"></script>
    <script src="/wwwroot/Scripts/base.js?dt=20201219"></script>
    <script src="/wwwroot/Scripts/xmlhelper.js"></script>
    <script src="/wwwroot/elementui/index.js?p=1"></script>
    <script src="/wwwroot/Scripts/echarts.min.js"></script>
    <script src="/wwwroot/Scripts/waterMark.js"></script>

    <style type="text/css">

        #clinbrain-container {
            height: 100%;
        }

        #clinbrain-container > .left {
            height: 100%;
            float: left;
            background: rgb(38, 47, 82);
        }

        #clinbrain-container > .left > .info {
            margin-top: 10px;
            border-bottom: 1px rgba(255, 255, 255, 0.3) dashed;
            padding-bottom: 20px;
        }

        #clinbrain-container > .left > .info .header {
            padding-left: 10px;
        }

        #clinbrain-container > .left > .info .header img {
            float: left;
            width: 50px;
        }

        #clinbrain-container > .left > .info .header div {
            float: left;
            padding-left: 10px;
        }

        #clinbrain-container > .left > .info .header div span {
            color: rgb(255, 255, 255);
        }

        #clinbrain-container > .left > .info .header div span:first-child {
            font-size: 18px;
            font-weight: bold;
            display: block;
        }

        #clinbrain-container > .left > .info .header div span:nth-child(n+2) {
            font-size: 12px;
        }

        #clinbrain-container > .left > .info ul {
            padding-top: 10px;
            clear: both;
        }

        #clinbrain-container > .left > .info ul li {
            list-style: none;
            color: rgba(255, 255, 255, 0.65);
            font-size: 12px;
            margin-left: 20px;
            line-height: 25px;
        }

        #clinbrain-container > .left > .info i {
            color: rgb(255, 255, 255);
        }

        #clinbrain-container > .left > .info-collapse {
            text-align: center;
            border-bottom: 1px rgba(255, 255, 255, 0.3) dashed;
            padding-bottom: 20px;
        }

        #clinbrain-container > .left > .info-collapse > span {
            display: block;
            color: rgb(255, 255, 255);
            font-size: 12px;
            line-height: 25px;
        }

        #clinbrain-container > .left > .el-menu {
            background-color: transparent;
            border: 0;
            padding-top: 10px;
        }

        #clinbrain-container > .left > .el-menu .el-menu-item {
            color: rgb(255, 255, 255);
            font-size: 12px;
            height: 30px;
            line-height: 27px;
        }

        #clinbrain-container > .left > .el-menu .el-menu-item:nth-child(6), #clinbrain-container > .left > .el-menu .el-menu-item:nth-child(9) {
            border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
        }

        .el-menu-item.is-active, .el-menu-item:hover {
            background-color: rgba(255, 255, 8255, 0.1);
        }

        #clinbrain-container > .left > .el-menu .el-menu-item span {
            margin-left: 20px;
        }

        #clinbrain-container > .right {
            float: right;
            background: white;
            height: 100%;
            width: calc(100% - 200px);
        }

        .patient-index .el-menu .iconfont {
            font-size: 20px;
        }

        .patient-index .is-active i {
            color: rgb(252, 192, 86);
        }
    </style>

</head>
<body>

<div id="clinbrain-container" v-cloak class="patient-index" style="overflow:hidden">
    <div id="leftapp" class="left" :style="leftStyle">
        <div class="info" v-show="!menuCollapse">
            <div class="header">
                <img src="/wwwroot/Images/user-default.png"/>
                <div>
                    <span>{{PersonalInfoNew.PatientName}}</span>
                    <span>{{PersonalInfoNew.SexName}}</span>
                    <span>{{PersonalInfoNew.CurrentAge}}</span>
                </div>
                <div>
                    <i class="iconfont clinBrain-menu" :title="TitleMsg" style="cursor:pointer"
                       v-on:click="onMenuClick"></i>
                </div>
            </div>
            <ul>
                <li v-if="HospitalConfig.Name!='Wener'">科室：{{PersonalInfo.CurrentDeptName}}</li>
                <li v-if="HospitalConfig.Name!='Wener'">病区：{{PersonalInfo.WardName}}</li>
                <li v-if="HospitalConfig.Name!='Wener'">诊断：{{PersonalInfo.AdmissionDxDescription}}</li>
                <li v-if="HospitalConfig.Name!='Wener'">
                    病人编码：{{clinBrain.getParam('patientId')}}
                </li>
                <li v-if="HospitalConfig.Name=='Wener'">身份证：{{ strIdCardLen(PersonalInfo.IdCard) }}</li>
                <li v-if="HospitalConfig.Name=='Wener'">PID：{{PersonalInfo.PID}}</li>
            </ul>
        </div>
        <div class="info-collapse" v-show="menuCollapse">
            <span><i class="iconfont clinBrain-menu" :title="TitleMsg" style="cursor:pointer"
                     v-on:click="onMenuClick"></i></span>
            <img src="/wwwroot/Images/user-default.png"/>
            <span>{{PersonalInfoNew.patientname}}</span>
            <span>{{PersonalInfoNew.sexname}}</span>
            <span>{{PersonalInfoNew|getAge}}</span>
        </div>
        <el-menu :collapse="menuCollapse" @select="menuChange">
            <el-menu-item v-for="(item,index) in funModel" :index="item">
                <template>
                    <i :class="item.Image"></i>
                    <span slot="title">{{item.Name}}</span>
                </template>
            </el-menu-item>
        </el-menu>
    </div>
    <div class="right" id="rightapp" style="overflow-x:hidden;overflow-y:hidden">
        <iframe v-if="src!=''" :src="src"
                style="width:100%;height:100%; margin:0px; padding:0px; border:none; overflow:hidden" frameborder="0"
                scrolling="no"></iframe>
    </div>
</div>
</body>

<script type="text/javascript">
    var app = new Vue(
        {
            el: "#clinbrain-container",
            data: {
                PersonalInfo: {},
                PersonalInfo_: {},
                PersonalInfoNew: {},
                funModel: [],
                DataStr: [],
                leftStyle: {width: '200px'},
                menuCollapse: false,
                iframeCode: "A00001",
                TitleMsg: "收缩",
                src: ''
            },
            created: function () {
                var _this = this;
                var datastr = '@ViewBag.DataStr';
                this.DataStr = datastr.split(',');
                // $.getJSON("/json/funModel.json",function (funModel){
                //     app.funModel = funModel;
                // })
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: 'com.base.api.cdr.PersonalSqlIndex',
                        params: {
                            patientId: clinBrain.getParam('patientId')
                        }
                    }
                }, _this).success(function (resp) {
                    app.funModel = resp.data.Data;
                    clinBrain.request({
                        url: "/pms/query",
                        params: {
                            code: 'com.base.api.cdr.PersonalSqlIndexQuery',
                            params: {
                                PatientID: clinBrain.getParam('patientId'),
                                OporIpVn: clinBrain.getParam("visitNumber"),
                                OporIp: clinBrain.getParam("oporIp"),
                                VisitNumber: clinBrain.getParam('visitNumber')
                            }
                        }
                    }, this).success(function (resp) {
                        // app.funModel = resp.data.funModel;
                        app.PersonalInfo = resp.data.PersonalInfo.Data[0];
                        app.PersonalInfoNew = resp.data.PersonalInfo.Data[0];
                        if (app.funModel.length > 0)
                            _this.src = app.testChange(app.funModel[0]);
                    });
                });
            },
            methods: {
                menuChange: function (item) {
                    this.src = this.testChange(item);
                    // document.getElementById(app.iframeCode).style.display = "none";
                    // document.getElementById(item.Code).style.display = "block";
                    // var selectIframe = document.getElementById(item.Code).getAttribute('src');
                    // if (selectIframe == "") {
                    //     var url = app.testChange(item);
                    //     if (item.Code == "OPIP15") {
                    //         url = item.Url;
                    //         url = url.replace('{EmpiId}', app.PersonalInfoNew.empiid)
                    //         document.getElementById(item.Code).setAttribute('src', url);
                    //     }
                    //     if (item.Code == "OPIP16") {
                    //         url = item.Url + app.PersonalInfo_.medicalrecordno;
                    //     }
                    //     if (item.Code == "IP0017") {
                    //         url = item.Url.replace('{EmpiId}', app.PersonalInfoNew.empiid)
                    //     }
                    //     document.getElementById(item.Code).setAttribute('src', url);
                    //
                    // }
                    // app.iframeCode = item.Code;


                },
                testChange: function (item) {
                    if (HospitalConfig.Name == "ZhaBei") {
                        if (item.Code == "ZZJH01") {
                            var reqUrl = item.Url + "?patientId=" + clinBrain.getParam("patientId") + "&pid=" + app.PersonalInfo_.medicalrecordno;
                            document.getElementById(item.Code).setAttribute('src', reqUrl);
                        } else
                            return item.Url + "?patientId=" + clinBrain.getParam("patientId") + "&visitNumber="
                                + clinBrain.getParam('visitNumber') + "&oporIp=" + clinBrain.getParam('oporIp');
                    } else {
                        return item.Url + "?patientId=" + clinBrain.getParam("patientId") + "&visitNumber="
                            + clinBrain.getParam('visitNumber') + "&oporIp=" + clinBrain.getParam('oporIp');
                    }
                },
                onMenuClick: function () {
                    this.menuCollapse = !this.menuCollapse
                    this.leftStyle.width = this.menuCollapse ? '60px' : '170px';
                    this.TitleMsg = this.menuCollapse ? '展开' : '收缩';
                    document.getElementById("rightapp").style.width = this.menuCollapse ? 'calc(100% - 60px)' : 'calc(100% - 170px)'
                },
                strIdCardLen: function (item) {
                    if (item != null && item != undefined) {
                        if (item.length > 0 && (item.length > 18 || item.length > 15)) {
                            if (item.length == 18) {
                                item = item.substr(0, 5) + '********' + item.substr(12, item.length - 13);
                            }
                            if (item.length == 15) {
                                item = item.substr(0, 5) + '********' + item.substr(12, item.length - 13);
                            }
                        }
                    }
                    return item;
                }
            },
            filters: {
                getAge: function (val) {
                    if (!val.birthday) return;
                    var mi = new Date(val.newcurrentdate) - new Date(val.birthday);
                    var year = parseInt(mi / 1000 / 60 / 60 / 24 / 365);
                    if (year >= 3) return year + "岁";
                    var day = parseInt(mi / 1000 / 60 / 60 / 24);
                    if (year >= 1) {
                        return "{year}岁{mo}月".format({year: year, mo: parseInt((day - year * 365) / 30)});
                    }
                    var mo = parseInt(day / 30);
                    return "{mo}月{day}天".format({mo: mo, day: day - mo * 30});
                },

                getPatientName: function (val) {
                    var name = "";
                    if (val != null && val != undefined) {
                        name = val.patientname;
                        if (app != null && app != undefined) {
                            for (var i = 0; i < app.DataStr.length; i++) {
                                if (app.DataStr[i].toLowerCase() == 'patientname' && name != null && name != undefined) {
                                    if (name.length > 4)
                                        name = name.substr(0, name.length - 4) + "***";
                                    else if (name.length > 0)
                                        name = name.substr(0, 1) + "***";
                                    break;
                                }
                            }
                        }
                    }
                    return name;
                }
            }
        });
</script>
</html>


